<%@ page import="com.mapper.CustomerMapper" %>
<%@ page import="com.entity.Customer" %>
<%@ page import="com.Imp.CustomerMapperImpl" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FoodExpress</title>
    <!-- 新 Bootstrap5 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css">

    <!--  popper.min.js 用于弹窗、提示、下拉菜单 -->
    <script src="https://cdn.staticfile.org/popper.js/2.9.3/umd/popper.min.js"></script>

    <!-- 最新的 Bootstrap5 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="./css/main.css">
    <link rel="stylesheet" type="text/css" href="./css/information_customer.css">
</head>
<body>
<%
    String userName = (String) session.getAttribute("username");
    CustomerMapper customerMapper = new CustomerMapperImpl();
    Customer customer = customerMapper.getCustomerByUserName(userName);

%>
<div class="container-fluid">
    <div class="row">
        <nav class="navbar navbar-expand-lg navbar-dark bg-dark ">

            <div class="container-fluid">
                <a class="navbar-brand" href="#"><img src="./img/caidan.png" height="35" width="35">&nbsp菜单</a>
                <ul class="navbar-nav ms-auto mb-2 mb-lg-0">

                    <li class="nav-item">
                        <a class="nav-link" href="information_customer.jsp">尊贵的顾客&nbsp<%=customer.getName() %>，您好！  </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="login.jsp">退出登录</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">关于我们</a>
                    </li>
                </ul>
            </div>
        </nav>
    </div>

    <div class="row">
        <div class="col-md-2 sidebar">
            <div class="sidebar-menu">
                <ul class="custom-list ">
                    <li><a href="main.jsp"><img src="./img/main.png" height="18" width="18">&nbsp主页</a></li>
                    <li><a href="storeList.jsp"><img src="./img/shop.png" height="18" width="18">&nbsp店铺</a></li>
                    <li><a href="cart.jsp"><img src="./img/shoppingTrolley.png" height="18" width="18">&nbsp购物车</a></li>
                    <div id="order">
                        <div class="orderlist">
                            <a class="btn" data-bs-toggle="collapse" href="#collapseOne"><img src="./img/order.png" height="18" width="18">&nbsp我的订单</a>
                        </div>
                        <div id="collapseOne" class="collapseshow collapse" data-bs-parent="#order">
                            <div class="orderlist-body">
                                <a href="waitingOrders.jsp">待配送</a>
                            </div>
                        </div>
                        <div id="collapseOne" class="collapseshow collapse" data-bs-parent="#order">
                            <div class="orderlist-body">
                                <a href="deliveringOrders.jsp">配送中</a>
                            </div>
                        </div>
                        <div id="collapseOne" class="collapseshow collapse" data-bs-parent="#order">
                            <div class="orderlist-body">
                                <a href="deliveredOrders.jsp">已完成</a>
                            </div>
                        </div>
                    </div>

                    <li><a href="information_customer.jsp"  style="background-color: #55aaff;"><img src="./img/personal.png" height="18" width="18">&nbsp个人信息</a></li>
                </ul>
            </div>
        </div>


        <!-- 模态框 -->
        <div class="modal" id="myModal">
            <div class="modal-dialog">
                <div class="modal-content">
                    <!-- 模态框头部 -->
                    <div class="modal-header">
                        <h4 class="modal-title">编辑个人信息</h4>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <!-- 模态框内容 -->
                    <div class="modal-body">
                        <form action="CustomerController?op=change" method="post">
                            <div class="input-group mb-4">
                                <span class="mt-2">用户名：</span>
                                <input type="text" class="form-control" name="name" placeholder="输入用户名">
                            </div>
                            <div class="input-group mb-4">
                                <span class="mt-2">性别：</span>
                                <select class="form-select" name="gender">
                                    <option value="男">男</option>
                                    <option value="女">女</option>
                                </select>
                            </div>
                            <div class="input-group mb-4">
                                <span class="mt-2">年龄：</span>
                                <input type="text" class="form-control" name="age" placeholder="输入年龄">
                            </div>
                            <div class="input-group mb-4">
                                <span class="mt-2">手机号：</span>
                                <input type="text" class="form-control" name="phoneNumber" placeholder="输入手机号">
                            </div>
                            <div class="input-group mb-4">
                                <span class="mt-2">收货地址 ：</span>
                                <input type="text" class="form-control" name="address" placeholder="输入收货地址">
                            </div>
                            <div class="modal-footer">
                                <button type="submit" class="btn btn-success">提交</button>
                                <button type="button" class="btn btn-danger" data-bs-dismiss="modal">关闭</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-10 main-content">
            <div v-for="store in stores" :key="store.id" class="store-info">
                <div class="bg-white">
                    <div class="developer-toolbag-block">
                        <div class="titleBar">
                            <h3 class="caption">个人中心</h3>

                            <p class="descript">全南理工唯一一家全自营外卖平台，让你拥有最本土的体验！</p>
                        </div>
                        <%
                            if(customer != null){
                        %>
                        <div class="AGrid-row  tool-package">
                            <div class="col-sm-6 ">
                                <div class="tile center-layer">
                                    <div class="layer-figure">
                                        <img src="./img/DevCloud-ProjectMan.png">
                                    </div>
                                    <h2 class="dev-list">用户名</h2>

                                    <div class="layer-text">
                                        <h1 class="">
                                            <%=customer.getName()%>
                                        </h1>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6 ">
                                <div class="tile center-layer">
                                    <div class="layer-figure">
                                        <img src="./img/DevCloud-CobeHub.png">
                                    </div>
                                    <h2 class="dev-list">账号</h2>

                                    <div class="layer-text">
                                        <h1 class=" ">
                                            <%=customer.getUserName()%>
                                        </h1>
                                    </div>

                                </div>
                            </div>
                            <div class="col-sm-6 ">
                                <div class="tile center-layer">
                                    <div class="layer-figure">
                                        <img src="./img/DevCloud-CloudPipeline.png">
                                    </div>
                                    <h2 class="dev-list">性别</h2>

                                    <div class="layer-text">
                                        <h1 class=" ">
                                            <%=customer.getSex()%>
                                        </h1>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6 ">
                                <div class="tile center-layer">
                                    <div class="layer-figure">
                                        <img src="./img/DevCloud-TestMan.png">
                                    </div>
                                    <h2 class="dev-list">年龄</h2>
                                    <div class="layer-text">
                                        <h1 class=" ">
                                            <%=customer.getAge()%>
                                        </h1>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6 ">
                                <div class="tile center-layer">
                                    <div class="layer-figure">
                                        <img src="./img/DevCloud-CodeCheck.png">
                                    </div>
                                    <h2 class="dev-list">手机号</h2>
                                    <div class="layer-text">
                                        <h1 class=" ">
                                            <%=customer.getPhone()%>
                                        </h1>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6 ">
                                <div class="tile center-layer">
                                    <div class="layer-figure">
                                        <img src="./img/DevCloud-CloudBuild.png">
                                    </div>
                                    <h2 class="dev-list">住址</h2>
                                    <div class="layer-text">
                                        <h1 class=" ">
                                            <%=customer.getAddress()%>
                                        </h1>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <%
                            }
                            else {
                        %>
                        <div class="col-sm-6 ">
                            <div class="tile center-layer">
                                <div class="layer-figure">
                                    <img src="./img/DevCloud-TestMan.png">
                                </div>
                                <div class="layer-text">
                                    <h1 class=" ">
                                        还没有个人信息？快快编辑！
                                    </h1>
                                </div>
                            </div>
                        </div>
                        <%
                            }
                        %>
                        <button type="button" class="btn btn-primary " data-bs-toggle="modal" data-bs-target="#myModal">
                            编辑资料
                        </button>
                    </div>
                </div>
            </div>
        </div>


    </div>
</div>
</body>
</html>
